<!--
 * @FileDescription 相机功能 - 模块
 * @Author 杨宇翔
 * @Date 20220816 09:44:21
 * @LastEditors 杨宇翔
 * @LastEditTime 20220816 09:44:21
-->
<template>
    <div class="container">
        <div class="raw-image">
            <span>{{ UsageComponent.Default.CameraFrameName.value }}</span>
            <div class="information" v-show="UsageComponent.Default.LaneLineState.value">
                <label for="continuousObstructionWireframeState">
                    <span class="material-icons"> check_box_outline_blank </span>
                    <span>连续型障碍物框</span>
                </label>

                <label for="pedestrianVisibilityState">
                    <span class="material-icons">square</span>
                    <span>行人</span>
                </label>

                <label>
                    <span class="material-icons">
                        square
                    </span>
                    <span>骑行者</span>
                </label>

                <label>
                    <span class="material-icons">
                        square
                    </span>
                    <span>机动车辆</span>
                </label>

                <label>
                    <span class="material-icons">
                        square
                    </span>
                    <span>其它类</span>
                </label>

                <label>
                    <span class="material-icons">
                        square
                    </span>
                    <span>距离本车最近的障碍物框</span>
                </label>

                <label>
                    <span></span>
                    <span>偏离车道首次压线颜色</span>
                </label>

                <label>
                    <span></span>
                    <span>偏离车道持续压线颜色</span>
                </label>
            </div>
        </div>
        <div class="options-container">
            <template v-for="[value, name] of UsageComponent.Default.CameraFrameIdOptions" :key="value">
                <input type="radio" name="相机功能 - 模块" :id="name" :value="value"
                    v-model.number="UsageComponent.Default.CameraFrameId.value" hidden>
                <label :for="name">
                    <span>{{ name }}</span>
                </label>
            </template>
            <button class="reset" type="button"
                @click="UsageComponent.Default.CameraInformationVisibility.value = true">
                <span>相机信息</span>
            </button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue';
import { UsageComponent } from './BinocularCameraComponent';
</script>

<style scoped>
.material-icons {
    font-size: 1.6rem;
}

.container {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

.raw-image {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    width: 66%;
    aspect-ratio: 16 / 9;

    border-radius: 1rem;
}

.raw-image>span {
    position: relative;
    top: -5rem;

    color: white;
    font-size: 2.4rem;
}

.information {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    padding: 1.5rem 2rem;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    background-color: #0000001F;
}

.information>label {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.information>label>span:last-of-type {
    color: white;
}

.information>label:nth-of-type(1)>span:first-of-type {
    color: #6048C4;
}

.information>label:nth-of-type(2)>span:first-of-type {
    color: #F507F0;
}

.information>label:nth-of-type(3)>span:first-of-type {
    color: #F99E01;
}

.information>label:nth-of-type(4)>span:first-of-type {
    color: #09FFFF;
}

.information>label:nth-of-type(5)>span:first-of-type {
    color: #0502F9;
}

.information>label:nth-of-type(6)>span:first-of-type {
    color: #FA0601;
}

.information>label:nth-of-type(7)>span:first-of-type {
    background-color: #FA0601;

    display: inline-block;
    width: 0.4rem;
    height: 1.2rem;
    margin-right: 0.4rem;
}

.information>label:nth-of-type(8)>span:first-of-type {
    background-color: #FFF30C;

    display: inline-block;
    width: 0.4rem;
    height: 1.2rem;
    margin-right: 0.4rem;
}

.options-container {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);

    bottom: 6rem;

    display: flex;
    flex-direction: row;
    gap: 2rem;
}

.options-container>button,
.options-container>label {
    display: block;
    width: 15rem;
    height: 6rem;

    display: flex;
    justify-content: center;
    align-items: center;

    border-radius: 1rem;
    background-color: #A2A2FF1F;
}

.options-container>button>span,
.options-container>label>span {
    color: #81859C;
    font-size: 1.6rem;
}

.options-container>input:checked+label {
    background: linear-gradient(180deg, #807DE1 0%, #218CDE 100%);
}

.options-container>input:checked+label>span {
    color: white;
}
</style>